<template>
  <div v-loading="pageLoading">
    <h1 class="v-txt-center v-pointer" v-ripple>自定义指令(点我)</h1>
    <span class="directive-label">自动聚焦</span>
    <v-input autofocus label="聚焦" width="260px" class="v-m-b"></v-input>
    <span class="directive-label">涟漪</span>
    <apple-button block class="v-m-b">涟漪按钮</apple-button>
    <span class="directive-label">在外部点击</span>
    <div
      class="v-m-b v-pointer"
      v-click-outside="clickOutside"
      @click="clickOutsideTxt = 'Hey man~'"
    >{{ clickOutsideTxt }}</div>
    <span class="directive-label">加载</span>
    <div v-ripple v-loading="isLoading" class="loading-container">
      <h1>你好呀～烙铁～</h1>
    </div>
    <apple-button @click="isLoading = !isLoading">切换加载状态</apple-button>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent } from 'vue';
import VInput from '@/components/Input.vue';
import AppleButton from '@/components/apple/AppleButton.vue';
import { refresh } from '@/utils';

export default defineComponent({
  components: {
    VInput,
    AppleButton
  },
  setup() {
    const isLoading = ref(true);
    const pageLoading = ref(false);
    const clickOutsideTxt = ref('Hey man~');
    const clickOutside = (event: PointerEvent) => clickOutsideTxt.value = '点我';

    refresh('directive', () => {
      pageLoading.value = true;
      setTimeout(() => {
        pageLoading.value = false;
      }, 2000);
    });
    return {
      isLoading,
      pageLoading,
      clickOutsideTxt,
      clickOutside
    }
  }
})




</script>

<style scoped>
.directive-label {
  color: #666;
}
.loading-container {
  background-color: yellowgreen;
  width: 300px;
  height: 300px;
}
</style>
